import React from 'react';
import {injectIntl, language} from './intl';
import PropTypes from 'prop-types';
import {Form, Row, Col, Modal} from 'antd';
import {FORM_OPTIONS, FORM_ROW_OPTIONS} from '../constants';
import WrappedInputNumber from '../common/WrappedInputNumber';
import TextInput from 'Shared/components/TextInput';
import WrappedSelect from '../common/WrappedSelect';
import {warrantyPolicyType} from '../Enum';
const FormItem = Form.Item;
const autosize = {minRows: 1};
export class AddDetail extends React.PureComponent {
    handleFilterChange = (value, name) => {
        this.props.onChange(name, value);
    };

    handleTypeChange = (value, name) => {
        const {vehicleItems = [], vehicleCategoryItems = []} = this.props.data;
        const length = vehicleCategoryItems.length || vehicleItems.length;
        if(length)
            Modal.confirm({
                title: this.props.intl.formatMessage({
                    id: 'addDetail.selectType.title',
                    defaultMessage: '切换索赔类型，将会清空该条款下的车型车辆清单，是否继续？'
                }),
                onOk: () => this.props.onChange(name, value)
            });
        else
            this.props.onChange(name, value);
    };
    render() {
        if(!this.props.data.type)
            return (<Row>
                <Col {...FORM_OPTIONS.col}>
                    <FormItem
                        label={this.props.intl.formatMessage({
                            id: 'addDetail.form.type',
                            defaultMessage: '索赔类型'
                        })}
                        {...FORM_OPTIONS.item}
                        validateStatus={this.props.isValidate && !this.props.data.type ? 'error' : null}
                        required>
                        <WrappedSelect
                            name="type"
                            value={this.props.data.type}
                            options={warrantyPolicyType.toList(language)}
                            onChange={this.handleFilterChange} />
                    </FormItem>
                </Col>
            </Row>);
        return (
            <React.Fragment>
                <Row>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={this.props.intl.formatMessage({
                                id: 'addDetail.form.type',
                                defaultMessage: '索赔类型'
                            })}
                            {...FORM_OPTIONS.item}
                            validateStatus={this.props.isValidate && !this.props.data.type ? 'error' : null}
                            required>
                            <WrappedSelect
                                name="type"
                                value={this.props.data.type}
                                options={warrantyPolicyType.toList(language)}
                                onChange={this.handleTypeChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={this.props.intl.formatMessage({
                                id: 'addDetail.form.warrantyMileage',
                                defaultMessage: '索赔里程'
                            })}
                            {...FORM_OPTIONS.item}
                            validateStatus={this.props.isValidate && !this.props.data.warrantyMileage ? 'error' : null}
                            required>
                            <WrappedInputNumber
                                min={0}
                                precision={0}
                                name="warrantyMileage"
                                value={this.props.data.warrantyMileage}
                                onBlur={this.handleFilterChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={this.props.intl.formatMessage({
                                id: 'addDetail.form.warrantyDuration',
                                defaultMessage: '索赔时间（月）'
                            })}
                            {...FORM_OPTIONS.item}
                            validateStatus={this.props.isValidate && !this.props.data.warrantyDuration ? 'error' : null}
                            required>
                            <WrappedInputNumber
                                min={0}
                                precision={0}
                                name="warrantyDuration"
                                value={this.props.data.warrantyDuration}
                                onBlur={this.handleFilterChange} />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <FormItem
                        label={this.props.intl.formatMessage({
                            id: 'addDetail.form.remark',
                            defaultMessage: '备注'
                        })}
                        {...FORM_ROW_OPTIONS.item}>
                        <TextInput type="textarea" name="remark" autosize={autosize}
                            value={this.props.data.remark} onBlur={this.handleFilterChange} />
                    </FormItem>
                </Row>
            </React.Fragment>
        );
    }
}
AddDetail.propTypes = {
    data: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    intl: PropTypes.object,
    isValidate: PropTypes.bool
};


export default injectIntl(AddDetail);
